<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />

		<title>Description Demo</title>

		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" />
	</head>

	<body>
		<header class="container">
			<h1>Description Demo</h1>
		</header>

		<div class="container">
			<form id="form">
				<div class="control-group input-append">
					<input type="text" name="age" id="age" data-required="true" data-pattern="^[0-9]+$" data-describedby="age-description" data-description="age" />

					<label for="age" class="add-on"><span class="icon-asterisk"></span> Age</label>
				</div>

				<div id="age-description"></div>

				<div class="btn-group">
					<button type="submit" class="btn btn-primary">Send</button>

					<button type="reset" class="btn">Reset</button>
				</div>
			</form>
		</div>

		<script src="vendor/jquery-1.9.0.min.js"></script>

		<script src="../jquery-validate.js"></script>

		<script>
			$('form').validate({
				onKeyup : true,
				sendForm : false,
				eachValidField : function() {

					$(this).closest('div').removeClass('error').addClass('success');
				},
				eachInvalidField : function() {

					$(this).closest('div').removeClass('success').addClass('error');
				},
				description : {
					age : {
						required : '<div class="alert alert-error">Required</div>',
						pattern : '<div class="alert alert-error">Pattern</div>',
						conditional : '<div class="alert alert-error">Conditional</div>',
						valid : '<div class="alert alert-success">Valid</div>'
					}
				}
			});
		</script>
	</body>
</html>